<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品展现</title>
		<link rel="stylesheet" href="./style.css"/>
	</head>
	<body>
		
		<div id="app">
			<div v-if="items.length">
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>价格</th>
							<th>数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in items">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.price | getPrice}} </td>
							<td><button @click="decrement(index)" v-bind:disabled="item.count<=1">-</button> {{item.count}} <button @click="increment(index)">+</button></td>
							<td><button @click="removeTr(index)"  type="button">移除</button></td>
						</tr>
						<tr>
							<th colspan="5">总价:{{totalPrice | getPrice}}</th>
						</tr>
					</tbody>
				</table>
			</div>
			<div v-else>
				<h3>购物车数据为空</h3>
			</div>
		</div>
		<script src="../../js/vue.min.js"></script>
		<script src="main.js"></script>
	</body>
</html>
